<template>
  <div>
    <tab-bar :tabBar="menuTabBar" :on-selected="onBarSelected"></tab-bar>
		<div style="position: relative;">
			<loading :ownState='loadingState'></loading>
			<div class="inner-content">
		    <div class="netdelivery">
		      <div class="l-netdelivery" v-if="cbfund.cbOut-cbfund.cbIn >= 0"><p class="red">{{longNumFormat(cbfund.cbOut-cbfund.cbIn)}}</p><p class="label">净投放 (亿元)</p></div>
		      <div class="l-netdelivery" v-else><p class="green">{{longNumFormat(cbfund.cbIn-cbfund.cbOut)}}</p><p class="label">净回笼 (亿元)</p></div>
		      <div class="r-netdelivery">
		        <div><span class="label">投放 (亿元) :</span> <span class="delivery-data">{{longNumFormat(cbfund.cbOut)}}</span></div>
		        <div><span class="label">回笼 (亿元) :</span> <span class="return-data">{{longNumFormat(cbfund.cbIn)}}</span></div>
		      </div>
		    </div>
			</div>
	    <div class="inner-content chart">
			  <div ref="chartPie" class="chart-pie"></div>
			    <div class="chart-pie-label">
		        <div class="label-left">
		      	  <span><span class="label">央票到期 </span><br/><span class="number">{{longNumFormat(cbfund.ypdq)}}</span></span>
		      	  <span><span class="label">正回购到期</span><br/><span class="number">{{longNumFormat(cbfund.zhgdq)}}</span></span>
		      	  <span><span class="label">逆回购发行</span><br/><span class="number">{{longNumFormat(cbfund.nhgfx)}}</span></span>
		        </div>
			      <div class="label-right">
			  	    <span><span class="label">央票发行</span><br/><span class="number">{{longNumFormat(cbfund.ypfx)}}</span></span>
			  	    <span><span class="label">正回购发行</span><br/><span class="number">{{longNumFormat(cbfund.zhgfx)}}</span></span>
			  	    <span><span class="label">逆回购到期</span><br/><span class="number">{{longNumFormat(cbfund.nhgdq)}}</span></span>
			      </div>
			    </div>
		    </div>
	      <div class="d-time"><span>数据截至  2017-04-25{{pieChartUpdateTime}}</span></div>
		  </div>
    </div>
</template>

<script>
import tabBar from '@/components/common/TabBar'
import echarts from 'echarts/lib/echarts'
import remoteDAO from '@/common/remoteDAO'
import constant from '@/common/constant'
import tools from 'libs/common/tools'

export default {
  name: 'week-chart',
  data () {
    return {
      menuTabBar: [{name: '今日'}, {name: '近一周'}],
      msgBar: 0,
      cbfund: '',
      pieChartUpdateTime: '',
      loadingState: true
    }
  },
  components: {
    tabBar
  },
  methods: {
    onBarSelected (index) {
      if (this.msgBar == index) return;
      this.loadingState = true;
      this.msgBar = index;
      this.getPageData(this.msgBar)
    },
    async getPageData () {
      try {
        const [weekchartData] = await Promise.all([
          remoteDAO.invoke(constant.InterfaceEnum.GET_C_B_FUND, {type: this.msgBar == 1 ? 0 : 1})
        ])
        console.log(weekchartData)
        this.cbfund = weekchartData
        this.pageInit()
      } catch (err) {
        this.$store.dispatch('showError')
      }
    },
    pageInit(weekchartData) {
      let pieOptions = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: [
          '#417506', '#77d99c', '#b5f3cc', '#ff831f', '#ff6101', '#eb333b'
        ],
        series: [
          {
            name: '央行资金',
            type: 'pie',
            hoverAnimation: false,
            clockwise: false,
            radius: ['85%', '70%'],
            label: {
              normal: {
                show: false
              }
            },
            data: [
              {value: this.cbfund.ypdq, name: '央票到期'},
              {value: this.cbfund.zhgdq, name: '正回购到期'},
              {value: this.cbfund.nhgfx, name: '逆回购发行'},
              {value: this.cbfund.nhgdq, name: '逆回购到期'},
              {value: this.cbfund.zhgfx, name: '正回购发行'},
              {value: this.cbfund.ypfx, name: '央票发行'}
            ]
          }
        ]
      }
      this.chartPie.setOption(pieOptions);
      this.loadingState = false;
    },
    longNumFormat(val) {
      if (!val) return;
      return tools.longNumFormat(val)
    }
  },
  mounted () {
    this.chartPie = echarts.init(this.$refs.chartPie)
  },
  created () {
    this.getPageData()
  },
  beforeDestroy () {
    echarts.dispose(this.chartPie);
  }
}
</script>

<style lang="less" scoped>
  @import '../../../assets/css/common.less';
  @import '../../../assets/css/cssReset';
.d-time{
  font-size:0.12rem;
  color:#999999;
  height:0.41rem;
  margin:auto;
  line-height:0.41rem;
}
.chart{
	height: 2.035rem;
	position: relative;
}
.green{
	color:rgba(26,174,82,0.5);
}
.inner-content{
  width:96%;
  margin:auto;
  .netdelivery{
	  height:0.65rem;
	  display:flex;
	  justify-content:space-between;
	  margin-bottom:0.15rem;
	  .l-netdelivery{
		  margin:auto;
		  width:50%;
		  p:first-child{
			  margin:0;
			  font-size:0.24rem;
			  font-family: Helvetica;
			  margin:0;
			}
			.label{
			  margin:0;
			  font-size:0.11rem;
			  color:#555555;
			  font-family:PingFang-SC;
			}
			.green{
	      color:#1aae52;
      }
      .red{
      	color:#eb333b;
      }
		}
		.r-netdelivery{
		  margin:auto;
		  width:50%;
		  .label{
			  margin:0;
			  font-size:0.11rem;
			  color:#555555;
			  font-family:PingFang-SC;
			}
			.delivery-data{
			  font-size:0.11rem;
			  line-height:0.2rem;
			  color:#EB333B;
			}
			.return-data{
			  font-size:0.11rem;
			  line-height:0.2rem;
			  color:#1AAE52;
			}
		}
	}
}
.chart-pie {
  padding-top: .495rem;
  width: 100%;
  height: 1.25rem;
  z-index: 99;
}
.chart-pie-label{
  position:absolute;
  top:0;
  bottom:0;
  width: 100%;
  height: 2.035rem;
  display:flex;
  justify-content: space-between;
  .label-left{
	  font-family: PingFangSC;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  text-align: left;
	  .label{
	    font-size:0.12rem;
	    color:#555555;
	    text-align: left;
	  }
	  .number{
	    color:#1AAE52;
	    font-size: 0.16rem;
	    text-align: left;
	  }
	}
	.label-right{
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  text-align: right;
	  .label{
		  font-size: 0.12rem;
	    color: #555555;
	    text-align: right;
	  }
	  .number{
	    color:#EB333B;
	    font-size: 0.16rem;
	    text-align: right;
    }
	}
}
</style>
